<template>
  <nav>
    <router-link to="/money" class="item" active-class="active">
      <i class="iconfont icon-money_1"></i>
      <span>记账</span>
    </router-link>
    <router-link to="/labels" class="item" active-class="active">
      <i class="iconfont icon-tianjia2"></i>
      <span>标签</span>
    </router-link>
    <router-link to="/statistics" class="item" active-class="active">
      <i class="iconfont icon-tongji"></i>
      <span>统计</span>
    </router-link>
  </nav>
</template>

<script lang="ts">
export default {
  name: 'Nav'
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/helper";
nav {
  background-color: #fff;
  box-shadow: 0 0 3px #ccc;
  display: flex;
  justify-content: space-around;
  .item {
    padding: 10px 0;
    width: 33%;
    text-align: center;
    color: #666;

    i {
      display: block;
      font-size: 2rem;
      color: inherit;
    }

    span {
      font-weight: 600;
    }
  }

  .item.active {
    color: $themeColor;
  }
}

</style>